<template>
  <div class="find-pages">
    <cp-nav-bar title="发现"></cp-nav-bar>
    <van-cell :border="false" @click="goToMoments">
      <div class="find-item">
        <cp-icon name="find-moments" class="find-item-icon"></cp-icon>
        <span class="find-item-text">朋友圈</span>
        <van-icon name="arrow" />
      </div>
    </van-cell>
  </div>
</template>
<script setup lang="ts">
import router from '@/router'

const goToMoments = () => {
  router.push('/moments')
}
</script>
<style lang="scss" scoped>
.find-pages {
  padding-top: 46px;
  background-color: #f5f5f5;
  height: calc(100vh - 93px);
  background-color: var(--bg-primary);
  .find-item {
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    font-size: 16px;
    color: var(--cp-contact-color);

    .find-item-icon {
      width: 26px;
      height: 26px;
    }
    .find-item-text {
      margin-left: 12px;
      white-space: nowrap; /* 禁止换行 */
      overflow: hidden; /* 隐藏超出部分 */
      text-overflow: ellipsis; /* 显示省略号 */
      flex: 1;
      text-align: left;
    }
    .find-item-search {
      font-size: 16px;
      color: rgba(153, 153, 153, 1);
      margin-left: 14px;
    }
  }
}
</style>
